<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <title>My JSP 'adminChart.jsp' starting page</title>
	<meta name = "viewport" content = "initial-scale = 1, user-scalable = no">
	<script src="./js/echarts.min.js"></script>
	<script src="./js/dark.js"></script>
	<script src="./js/jquery-1.10.2.js"></script>
  </head>
  <body>
    <div id="richListChart" style="width:95%; height:450px"></div>
    <script type="text/javascript">
    	$(function(){
    		var richListChart = echarts.init(document.getElementById("richListChart"),'dark');
    		var user_id = ${user_id};
    		var balance = ${balance};
    		var name = ${name};
    		richListChart.setOption({
    			title:{
    				text:'SoMuchMoney 十大富豪排行榜'
    			},
    			legend:{
    				data:['余额']
    			},
    			color: ['#3398DB'],
    			tooltip:{
		 					show: true,
		 					trigger: 'axis',
		 					backgroundColor:'#EE7A2F',
		 					borderColor:'#666',
		 					borderWidth:'1px'
		 		},
		 		xAxis : [{
					            type : 'category',
					            data : name,
					            axisTick: {
					                alignWithLabel: true
					            }
					        }
				],
			    yAxis : [
			        {
			            type : 'value'
			        }
			    ],
			    series : [
			        {
			            name:'资产',
			            type:'bar',
			            barWidth: '50%',
			            data:balance,
			            label : {
		 						normal:{
		 							show : true,
		 							formatter : '{c} 元'
		 						}
		 					},
			        }
			    ]
    		});
    	});
    </script>
  </body>
</html>
